<template>
  <div class="aside-container">
    <el-aside :width="menuShow ? '222px' : '64px'">
      <div class="menu-header" :class="{'show-icon': isCollapse}">
        <i class="header-icon"></i>
        <span class="header-title" v-show="!isCollapse">
          项目管理系统
        </span>
        <i
          class="collapse-icon"
          :class="isCollapse ? 'icon-zhankai1' : 'icon-shouqi1'"
          :title="isCollapse ? '展开' : '收起'"
          @click="handleCollapse"
        ></i>
      </div>
      <div class="aside-content" :class="{'collapse-content': isCollapse}">
        <el-menu
          ref="elMenu"
          :default-active="menuItemActive"
          class="menu-vertical"
          :collapse="isCollapse"
          :router="true"
          unique-opened
          @select="handleSelect"
        >
          <template v-for="(menu, index) in menus">
            <el-submenu
              v-if="menu.children && menu.children.length > 0"
              :key="menu.id"
              :index="menu.alias"
              :class="{'is-active': isActiveSubmenu(menu)}"
            >
              <template slot="title">
                <i :class="menu.menuIcon" class="menu-left-icon"></i>
                <span class="menu-title"> {{ menu.name }}</span>
              </template>
              <el-menu-item
                v-for="item in menu.children"
                :class="{'is-active': item.alias == menuItemActive}"
                :key="item.alias"
                :index="'/' + item.alias"
              >
                <span slot="title" class="menu-item-title" :title="item.name"
                  ><span class="menu-item-name">{{ item.name }}</span
                  ></span
              ></el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              class="main-menu"
              :class="{'is-active': menu.alias == menuItemActive}"
              :key="index"
              :index="'/' + menu.alias"
            >
              <span slot="title" class="menu-item-title" :title="menu.name"
                ><i :class="menu.menuIcon" class="main-menu-icon"></i
                ><span class="menu-item-name">{{ menu.name }}</span
                ></span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </el-aside>
  </div>
</template>

<script>
import menu from '@/api/menu.js'
import utils from '@/hotent-ui-util.js'
import {mapMutations, mapState} from 'vuex'

export default {
  components: {

  },

  data() {
    return {
      collapseItemActive: '',
      menuItemActive: '',
      isCollapse: false,
      menuShow: true
    }
  },
  computed: {
    ...mapState({
      menus: state => {
        return state.menu.menus
      }
    })
  },
  created() {
    this.$router.afterEach(_ => {
      this.syncUrlToMenu()
    })
  },
  mounted() {
    const this_ = this
    setTimeout(function() {
      !this_.currentUser && this_.$store.dispatch('user/loadCurrentUserDetail')
    }, 2000)
    const currentUser = this.$store.state.login.currentUser
    if ((!this.menus || this.menus.length == 0) && currentUser) {
      let this_ = this
      this.$store.dispatch('menu/actionMenus').then(data => {
        if (this.isHasCurrentUrlRight()) {
          this.syncUrlToMenu()
        } else {
          //          this_.$router.push('home');
        }
      })
    } else {
      this.syncUrlToMenu()
    }
  },
  methods: {
    ...mapMutations('menu', ['setSelectedMenu']),
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.menuShow = !this.menuShow
      this.$emit('is-collapse', this.isCollapse)
    },
    isActiveSubmenu(item) {
      const activeMenu = item.children.find(
        it => it.alias === this.menuItemActive
      )
      return activeMenu && activeMenu.alias ? true : false
    },
    // 常用菜单
    handleCommon() {
      this.$emit('cliceCommon')
    },
    // 同步当前url地址到目录菜单中，选中对应的目录菜单
    syncUrlToMenu: function() {
      let routePath = this.$route.path
      if (routePath) {
        routePath = routePath.replace('/', '')
        this.handleSelect(routePath)
      }
    },
    // 判断是否拥有当前url地址的权限
    isHasCurrentUrlRight: function() {
      let routePath = this.$route.path
      if (routePath) {
        let hasRight = false
        if (!this.menus || this.menus.length < 1) {
          return hasRight
        }
        let tempMenu = JSON.parse(JSON.stringify(this.menus))
        let listMenu = utils.nest2tile(tempMenu, '', true)
        let ruterArr = routePath.split('/')
        let lastRuter = ruterArr[ruterArr.length - 1]
        listMenu.forEach(menu => {
          if (lastRuter.indexOf(menu.alias) > -1) {
            hasRight = true
            return
          }
        })
        return hasRight
      }
    },
    handleSelect: function(alias) {
      //判断字符串开头是否包含“/”
      if (alias.substr(0, 1) == '/') {
        alias = alias.replace('/', '')
      }
      let _this = this
      menu.getMenuByAlias(alias, m => {
        m && _this.$emit('menuChange', m)
        if (m && m.parent) {
          _this.collapseItemActive = m.parent.alias
          _this.menuItemActive = m.alias
        } else {
          _this.menuItemActive = alias
        }
      })
      const activeMenuObj = this.menus.find(item => item.alias === alias)
      this.setSelectedMenu(activeMenuObj)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.commonlyUseMenus {
  height: 48px;
  margin: 0 20px;
  line-height: 48px;
  color: #939daf;
  display: flex;
  align-items: center;
  cursor: pointer;
  .icon {
    font-size: 1;
  }
  &:hover {
    color: #409eff;
  }
}

.aside-container {
  position: relative;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  background-color: #fff;
}

.el-aside {
  margin-top: 3px;
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: width 0.3s;
  .aside-content {
    overflow: auto;
    height: calc(100% - 57px);
    //隐藏滚动条
    &::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
    ::v-deep {
      .main-menu {
        .menu-item-name {
          font-size: 16px;
          padding-left: 6px;
        }
      }
    }
    ::v-deep.main-menu.is-active {
      .main-menu-icon {
        color: #409eff;
      }
    }
    .main-menu-icon {
      margin-right: 10px;
      width: 18px;
    }
  }
  .collapse-content {
    height: calc(100% - 98px);
  }
  ::v-deep {
    .el-menu--collapse {
      .el-submenu {
        &:hover {
          background: #f0f8ff;
        }
      }
    }
    .el-submenu__title,
    .commonlyUseMenus {
      i {
        font-size: 18px;
        color: #939daf;
      }
      .el-submenu__icon-arrow {
        font-weight: bold;
      }
    }
    .commonlyUseMenus {
      &:hover {
        i {
          color: #409eff;
        }
      }
    }
    .el-submenu__title {
      height: 48px;
      line-height: 48px;
      &:hover {
        background: unset;
        .menu-title,
        i {
          color: $--color-primary;
        }
      }
      .menu-title {
        font-size: 16px;
        color: #939daf;
      }
    }
    .is-opened {
      background: #fbfbfb;
      .el-menu-item {
        background: #fbfbfb;
      }
    }
    .el-submenu {
      .menu-left-icon {
        padding-right: 8px;
      }
      .el-menu-item {
        height: 40px;
        line-height: 40px;
        color: #939daf;
        .menu-item-title {
          padding-left: 16px;
        }
      }
    }
    .el-submenu.is-active {
      .el-submenu__title {
        .menu-title,
        i {
          color: $--color-primary;
        }
      }
    }
    .el-menu-item {
      &:hover {
        background: unset;
        .menu-item-name {
          color: $--color-primary;
        }
      }
      .collect-icon {
        color: #e2e2e2;
      }
      .is-collect {
        color: #ffca28;
      }
    }
    .el-menu-item.is-active {
      background: #f0f8ff;
      .menu-item-name {
        color: $--color-primary;
        font-weight: normal;
      }
      .is-collect {
        color: #ffca28;
      }
    }
  }
}

.menu-header {
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-bottom: 1px solid #dedede;
  .header-icon {
    position: relative;
    &::before,
    &::after {
      position: absolute;
      content: '';
      height: 16px;
      width: 16px;
      display: inline-block;
      border-radius: 2px;
      transform: rotate(45deg);
      left: 0;
      top: 0px;
    }
    &::before {
      background: $--color-primary;
    }
    &::after {
      background: #eb9a8d;
      left: 8px;
    }
  }
  .header-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding-left: 36px;
    padding-right: 18px;
  }
  .collapse-icon {
    font-size: 18px;
    cursor: pointer;
  }
}
.show-icon {
  display: flex;
  flex-direction: column;
  height: 96px;
  .header-icon {
    top: 18px;
    left: 20px;
  }
  .collapse-icon {
    padding-top: 58px;
  }
}

.menu-vertical:not(.el-menu--collapse) {
  background: transparent;
  border-right-width: 0;
}
::v-deep {
  .el-menu--collapse {
    width: 64px;
    transition: width 0.3s;
  }
}
.el-menu-item {
  height: 45px;
  line-height: 45px;
  color: #707070;
  span {
    font-size: 14px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
}

li.el-menu-item.is-active {
  background: $--color-primary;
  color: #fff;
  font-weight: bold;
  margin-right: -1px;
}

.is-active + .el-collapse-item >>> .el-collapse-item__header {
  border-top: 1px solid #dedede;
}

.el-menu-item:hover,
.el-menu-item:focus {
  background-color: $--color-secondary;
}

.last-collapse-item >>> .el-collapse-item__header {
  border-bottom-width: 0;
}

>>> .el-collapse-item__header {
  background-color: transparent;
  margin: 0 20px;
  font-size: 16px;
  color: #666666;
  border-bottom: none;
  height: 56px;
  line-height: 56px;
}

>>> .el-collapse-item__wrap {
  background-color: transparent;
  border-bottom-width: 0;
}

>>> .el-collapse-item__content {
  padding-bottom: 10px;
}

>>> .el-collapse-item__arrow {
  margin-right: 0;
  font-size: 16px;
  font-weight: bold;
}

.pre-span,
.tail-span {
  height: 12px;
  width: 12px;
  display: inline-block;
  border-radius: 2px;
  transform: rotate(45deg);
}

.pre-span {
  background: $--color-primary;
  margin-right: -5px;
}

.tail-span {
  background: #eb9a8d;
  margin-right: 10px;
}

.menu-icon {
  margin-right: 10px;
}
.bmk_star {
  font-size: 14px;
  position: absolute;
  right: 12px;
  // line-height: 45px;
}
.aside-container {
  z-index: 11;
  .menu-name {
    white-space: nowrap;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .menu-item-name {
    width: 124px;
  }
}
</style>
